<template>
  <div ref="echarts" class="echarts" style="width: 100%;"></div>
</template>

<script>
import echarts from 'echarts';
export default {
  name: 'Echarts',
  props: {
    options: {}
  },
  data() {
    return {
      chart: null,
    }
  },
  mounted() {
    if (this.options !== null && this.options !== {}) {
      this.$nextTick(() => {
        this.initEcharts()
      })
    }
  },
  watch: {
    'options': function (newVal, oldVal) {
      if (newVal !== null && oldVal !== undefined) {
        this.initEcharts();
      }
    }
  },
  methods: {
    initEcharts() {
      this.chart = echarts.init(this.$refs.echarts);
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            if (params.children && params.children.length > 0) {
              return `${params.name}<br/>点击展开`;
            }
            return params.name;
          }
        },
        series: [
          {
            type: 'tree',
            data: this.options,
            top: '10%',
            left: '15%',
            bottom: '10%',
            right: '25%',
            symbolSize: 6,
            nodePadding: 50,
            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right',
              fontSize: 14,
              formatter: function (params) {
                const lastDashIndex = params.name.lastIndexOf('@');
                if (lastDashIndex !== -1) {
                  const beforeLastPart = params.name.substring(0, lastDashIndex);
                  const afterLastPart = params.name.substring(lastDashIndex + 1);
                  return beforeLastPart + '\n\n' + afterLastPart;
                }
                return params.name;
              }
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left',
                fontSize: 14,
                formatter: function (params) {
                  const lastDashIndex = params.name.lastIndexOf('@');
                  if (lastDashIndex !== -1) {
                    const beforeLastPart = params.name.substring(0, lastDashIndex);
                    const afterLastPart = params.name.substring(lastDashIndex + 1);
                    return beforeLastPart + '\n\n' + afterLastPart;
                  }
                  return params.name;
                }
              }
            },
            emphasis: {
              focus: 'descendant'
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750,
            initialTreeDepth: -1,
            itemStyle: {
              normal: {
                borderColor: '#FF0000',
                borderWidth: 1,
                gapWidth: 1
              }
            }
          }
        ]
      };

      this.chart.setOption(option);
      // 动态计算容器高度
      this.updateDynamicHeight();

      // 监听图表变化事件
      this.chart.on('dataZoom', () => this.updateDynamicHeight());
      this.chart.on('restore', () => this.updateDynamicHeight());
    },

    updateDynamicHeight() {
      // 获取图表的布局信息
      const layoutInfo = this.chart.getDom().getBoundingClientRect();
      const chartHeight = layoutInfo.height;

      // 根据实际需求动态计算新高度
      const newHeight = this.calculateNewHeight();

      // 更新容器高度
      this.$refs.echarts.style.height = `${newHeight}px`;

      // 重新调整图表大小
      this.chart.resize();
    },

    calculateNewHeight() {
      // 示例：根据节点数量动态计算高度
      const data = this.chart.getOption().series[0].data;
      const nodeCount = this.countNodes(data);
      const baseHeight = 400; // 基础高度
      const additionalHeightPerNode = 60; // 每个节点增加的高度

      return baseHeight + nodeCount * additionalHeightPerNode;
    },

    countNodes(data) {
      let count = 0;

      function traverse(node) {
        count++;
        if (node.children) {
          node.children.forEach(child => traverse(child));
        }
      }

      data.forEach(rootNode => traverse(rootNode));
      return count;
    }

  },

  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },

}
</script>

<style scoped>
.echarts {
  width: 100%;
  height: 400px;
}
</style>
